<template>
  <div class="app-container">
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button @click="handleAdd">新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button plain @click="translation">打印</el-button>
      </el-col>
      <right-toolbar @queryTable="Refresh"></right-toolbar>
    </el-row>
    <vxe-table :loading="tableData.loading" :data="tableData.list">
      <vxe-column type="checkbox" width="50" align="center" />
      <vxe-table-column width="100" title="状态" align="center" field="status">
        <template #default="{ row }">
          <dict-tag :options="apply_state" :value="row.state" />
        </template>
      </vxe-table-column>
      <vxe-table-column title="编号" field="number">
        <template #default="{ row }">
          <el-button style="margin-right: 10px;" link type="primary" size="small" @click="handleDetail(row)">
            {{ row.number }}
          </el-button>
        </template>
      </vxe-table-column>

      <vxe-table-column title="费用" field="fee"></vxe-table-column>
      <vxe-table-column title="维修内容" field="repairContent"></vxe-table-column>
      <vxe-table-column title="数量" field="num"></vxe-table-column>
      <vxe-table-column title="申请人" field="createUserName"></vxe-table-column>
      <vxe-table-column title="备注" field="remark"></vxe-table-column>

      <vxe-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template #default="{ row }">
          <el-button style="margin-right: 10px;" link type="primary" size="small"
            v-if="row.state === 0 || row.state === 3" @click="handleSub(row)">
            提交
          </el-button>
          <el-button style="margin-right: 10px;" link type="primary" size="small"
            v-if="row.state === 0 || row.state === 3" @click="handleUpdate(row)">
            修改
          </el-button>
          <el-button v-if="row.state === 0 || row.state === 3" size="small" link type="primary"
            @click="handleDelete(row)">
            删除
          </el-button>
          <el-button v-if="row.state === 2" size="small" link type="primary" @click="handleRepair(row)">
            完成维修
          </el-button>
        </template>
      </vxe-table-column>
    </vxe-table>

    <pagination v-show="tableData.paging.total > 0" :total="tableData.paging.total"
      v-model:page="tableData.paging.pageNum" v-model:limit="tableData.paging.pageSize" @pagination="getList" />
    <el-dialog v-model="isMiansDialogVisible" width="50%">
      <mains-dialog ref="mainsDialog" @sub="getList"></mains-dialog>
    </el-dialog>
    <edit :apply-type="applyType" ref="edit" @sub="handleAddSuccess"></edit>
    <finish-repair-dialog ref="finishDialog" @sub="getList"></finish-repair-dialog>
  </div>
</template>

<script setup>
import api from "./api.js";
import Edit from './edit.vue'
import FinishRepairDialog from "@/views/asset/apply/repair/FinishRepairDialog.vue";
import MainsDialog from "./Maintenance.vue"

const edit = ref();
const finishDialog = ref();
const mainsDialog = ref();
const isMiansDialogVisible = ref();

const { proxy } = getCurrentInstance();
const { apply_state } = proxy.useDict("apply_state");

// 申请类型
const applyType = ref('ZCWX');

const queryParams = reactive({
  applyType: applyType.value,
});

const tableData = reactive({
  loading: false,
  list: [], // 表格列表数据
  paging: {
    total: 0, // 总条数
    pageNum: 1,
    pageSize: 10,
  }
});

function getList() {
  tableData.loading = true;
  const {pageNum, pageSize} = tableData.paging;

  const query = {...queryParams};
  const pageReq = { page: pageNum - 1, size: pageSize };
  api.list(query, pageReq).then(response => {
    const { content, totalElements } = response
    content.forEach(item => {
      if (item.formData) {
        let formData = JSON.parse(item.formData);
        Object.assign(item, formData);
      }
    })
    tableData.list = content;
    tableData.total = totalElements;
    tableData.loading = false;
   
  });
}
function Refresh() {
  proxy.$message.success("刷新成功");
}

/** 新增操作成功后的回调 */
function handleAddSuccess() {
  // 新增成功后的处理
  proxy.$message.success("新增成功");
  getList();  // 刷新数据
}
function handleAdd() {
  edit.value.open();
}

function handleUpdate(row) {
  edit.value.open(row);
}

function handleDelete(row) {
  proxy.$modal.confirm('是否确认删除').then(function() {
    return api.del(row.id);
  }).then(() => {
    getList();
    proxy.$modal.msgSuccess("删除成功");
  }).catch(() => {});
}
function translation() {
  isMiansDialogVisible.value = true;
    }

    function handleDialogClose() {
      isMiansDialogVisible.value = false;
    }
function handleSub(row) {
  api.sub(row.id).then(()=> {
    getList();
  });
}

/**
 * 完成维修
 * @param row 行数据
 */
function handleRepair(row) {
  finishDialog.value.open(row);
}

onMounted(()=> {
  getList()
})

</script>
  